<template>
    <div class="sy-bottom-w">
        <div style="float:left;width:1000px;position: relative;">
            <TabTit>单笔定位各阶段实时利率</TabTit>
            <div style="width:1000px;height:400px; overflow:hidden">
                <div id="danbililv" style="width:1120px;height:400px;"></div>
            </div>

            <div class="sy-bottom-search">
                <el-form ref="form" :model="form">
                    订单编号：
                    <el-input
                        size="mini"
                        v-model="form.name"
                        placeholder="请输入名称"
                        suffix-icon="el-icon-search"
                        style="width:180px"
                    ></el-input>
                </el-form>
            </div>
        </div>
        <div class="fr" style="width:355px">
            <TabTit>订单基本信息</TabTit>
            <div class="li-one" v-for="item in info" :key="item.index">
                <div class="li-name fl" style="width:120px;">{{item.name}} :</div>
                <div class="li-num fl" vi>
                    <el-tag v-if="item.tag">{{item.tag}}</el-tag>
                    <span>{{item.num}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import TabItme from './ItemTab.vue'
import TabTit from '@/components/Tit.vue'
import Bus from '../components/bus.js'
export default {
    components: {
        TabItme,
        TabTit,
    },
    data() {
        return {
            dataIndex: 2,
            form: {
                name: '',
            },
            info: [
                {
                    name: '订单编号',
                    num: '4100518510',
                },
                {
                    name: '供应商名称',
                    num: '特变电工XX变压器有限公司',
                },
                {
                    name: '基准建议价格',
                    num: '5.3%',
                },
                {
                    name: '当前阶段',
                    tag: '招投标',
                },
                {
                    name: '实时建议利率',
                    num: '5.3%',
                },
                {
                    name: '实时跟踪利率',
                    num: '5.6%',
                },
                {
                    name: '风险值评价',
                    num: '30分',
                },
            ],
            jiedanArr: ['招投标', '合同签订', '采购订单', '物资生产', '物资配送', '工程投运验收', '工程质保'],
        }
    },
    mounted() {
        Bus.$on('getTarget', (val) => {
            const target = Number(val[0])
            if (target > 0 && target < 5) {
                this.dataIndex = 0
            } else if (target > 5 && target < 10) {
                this.dataIndex = 1
            } else if (target > 10 && target < 15) {
                this.dataIndex = 2
            } else if (target > 15 && target < 20) {
                this.dataIndex = 3
            } else if (target > 20 && target < 25) {
                this.dataIndex = 4
            } else if (target > 25 && target < 30) {
                this.dataIndex = 5
            } else if (target > 30 && target < 35) {
                this.dataIndex = 6
            } else {
                this.dataIndex = 7
            }
            this.info[3].tag = this.jiedanArr[this.dataIndex]
            console.log(this.dataIndex)
        })
        this.$nextTick(() => {
            this.InitChart()
            this.info[3].tag = this.jiedanArr[this.dataIndex]
        })
    },
    methods: {
        InitChart() {
            let myChart = this.$echarts.init(document.getElementById('danbililv'))
            // 指定图表的配置项和数据 #8f8ffd', '#f2c1c7', '#c71d24'
            var option = {
                color: ['#8f8ffd', '#8f8ffd', '#f2c1c7'],

                tooltip: {
                    trigger: 'axis',
                    // axisPointer: {
                    //     type: 'cross',
                    //     crossStyle: {
                    //         color: '#999',
                    //     },
                    // },
                    formatter: function (params) {
                        console.log(params)
                        var relVal = params[0].name
                        for (var i = 0, l = params.length; i < l; i++) {
                            if (params[i].seriesName === '实时建议利率') {
                                relVal += '<br/>' + params[i].seriesName + '(个)' + ' : ' + params[i].value
                            }
                            if (params[i].seriesName === '实时跟踪利率') {
                                relVal += '<br/>' + params[i].seriesName + '(个)' + ' : ' + params[i].value
                            }
                            if (params[i].seriesName === '风险值评估') {
                                relVal += '<br/>' + params[i].seriesName + '(万)' + ' : ' + params[i].value
                            }
                        }
                        return relVal
                    },
                },
                toolbox: {
                    // feature: {
                    //     dataView: { show: true, readOnly: false },
                    //     magicType: { show: true, type: ['line', 'bar'] },
                    //     restore: { show: true },
                    //     saveAsImage: { show: true },
                    // },
                },
                legend: {
                    data: ['实时建议利率', '实时跟踪利率', '风险值评估'],
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [
                            '招投标',
                            '合同签订',
                            '采购定单',
                            '物资生产',
                            '物资配送',
                            '工程投运验收',
                            '工程质保',
                            '',
                        ],
                        axisPointer: {
                            type: 'shadow',
                        },
                        boundaryGap: false,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 15,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %',
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                        },
                        // 竖线
                        splitLine: {
                            show: true,
                        },
                        scale: true,
                        splitNumber: 1,
                    },
                ],
                grid: {
                    right: 5,
                    left: 5,
                    top: 50,
                    containLabel: true,
                },
                series: [
                    // {
                    //     name: '实时建议利率',
                    //     type: 'line',
                    //     data: [0, 4.9, 7.0, 1, 5.6, 10.7, 2.6, 1, 2],
                    //     right: '5%',
                    // },
                    {
                        name: '实时建议利率',
                        type: 'line',
                        smooth: true,
                        data: [1, 5, 6],
                        symbol: 'none',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(58,132,255, 0.5)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(58,132,255, 0)', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                    {
                        name: '实时跟踪利率',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(58,132,255, 0.5)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(58,132,255, 0)', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                        type: 'line',
                        data: ['-', '-', 6, 5.4, 3.7, 5.7, 2, 3, 4],
                        right: '5%',
                        symbol: 'none',
                        // smooth: true,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 2,
                                    type: 'dashed', //'dotted'虚线 'solid'实线
                                },
                            },
                        },
                    },
                    {
                        name: '风险值评估',
                        type: 'bar',
                        data: [0, 0, 0.3, 2, 1.5, 1, 2.5],
                        right: '5%',
                        barWidth: '30px',
                    },
                    // {
                    //     type: 'effectScatter',
                    //     symbolSize: 6,
                    //     data: [6],
                    //     color: '#8f8ffd',
                    //     xAxisIndex: 0,
                    //     borderWidth: 1,
                    // },
                ],
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.clear()
            myChart.setOption(option)
            myChart.on('click', function (e) {
                console.log('444', e)
            })
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0, // 显示第几个series
                dataIndex: this.dataIndex, // 显示第几个数据
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.sy-bottom-w {
    width: 100%;
    .sy-bottom-search {
        left: 737px;
        position: absolute;
        font-size: 12px;
        top: 72px;
        color: #666666;
    }
}
</style>